<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 第一行 S -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            size="mini" @focus="loadSubjectList"
            @change="handleChangeSelect">
              <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="form.catalogID" placeholder="请选择" size="mini">
              <el-option
              v-for="item in directoryList"
               :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="form.tags" placeholder="请选择" size="mini">
              <el-option
              v-for="item in tagsList"
               :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="根据题干搜索" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第一行 E -->

      <!-- 第二行 S -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" placeholder="请选择" size="mini">
              <el-option
              v-for="item in questionType"
               :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择" size="mini">
              <el-option
              v-for="item in difficulty"
               :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择" size="mini">
              <el-option
              v-for="item in direction"
               :key="item"
              :label="item"
              :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select
            v-model="form.creatorID"
            placeholder="请选择"
            size="mini"
            @focus="creatorIDFocus">
              <el-option
              v-for="item in usersList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 E -->

      <!-- 第三行 S -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks" placeholder="请选择" size="mini"></el-input>
        </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName" placeholder="请选择" size="mini"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="城市">
            <el-row type="flex" :gutter="5">
              <el-col :span="12">
                <el-select v-model="form.province" placeholder="请选择" size="mini">
                  <el-option
                  v-for="item in provinces"
                  :key="item"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select v-model="form.city" placeholder="请选择" size="mini">
                  <el-option
                  v-for="item in citys"
                  :key="item"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>

          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item class="input-button">
            <el-button size="small" @click="eliminate">清除</el-button>
            <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 E -->
    </el-form>
  </div>
</template>

<script>
import { simple as subjectList } from '@/api/hmmm/subjects.js'
import { simple as directoryList } from '@/api/hmmm/directorys.js'
import { simple as tagList } from '@/api/hmmm/tags.js'
import { simple as usersList } from '@/api/base/users.js'

import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'QuestionsSearch',

  data () {
    return {
      form: {
        page: 1,
        pagesize: 5,
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 题目类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省份
        city: '' // 城市
      },
      newForm: {},
      subjectList: [], // 学科列表数组
      directoryList: [], // 二级目录列表数组
      tagsList: [], // 标签列表数组
      usersList: []
    }
  },

  computed: {
    questionType () {
      return questionType
    },
    difficulty () {
      return difficulty
    },
    direction () {
      return direction
    },
    provinces () {
      return provinces()
    },
    citys () {
      return citys(this.form.province)
    }
  },

  created () {

  },

  components: {

  },
  methods: {
    // 获取用户列表
    async creatorIDFocus () {
      const { data } = await usersList({
        keyword: this.form.keyword,
        disabled: 0
      })
      this.usersList = data
    },
    // 获取学科列表数据
    async loadSubjectList () {
      const { data } = await subjectList()
      console.log(data)
      this.subjectList = data
    },
    // 根据学科列表数据获取二级目录的数据
    async handleChangeSelect (val) {
      const { data: directoryData } = await directoryList(val)
      const { data: tagsData } = await tagList({ id: val })
      this.directoryList = directoryData
      this.tagsList = tagsData
    },
    // 点击清除按钮清除数据
    eliminate () {
      this.form = {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 题目类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省份
        city: null // 城市
      }
      this.$emit('update-data')
      this.directoryList = []
      this.tagsList = []
    },
    // 点击确定搜索
    onSearch () {
      for (const key in this.form) {
        if (this.form[key] !== '') {
          this.newForm[key] = this.form[key]
        }
      }
      this.$emit('update-data', this.newForm)
    },
    // page改变
    changePage (val) {
      this.form.page = val
      this.onSearch()
    },
    // pagesize改变
    changePagesize (val) {
      this.form.pagesize = val
      this.onSearch()
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  padding: 10px;
  margin-top: 15px;
  .el-select{
    width: 100%;
  }
  .input-button{
    display: flex;
    justify-content: flex-end;
  }
  .el-col{
    height: 50px;
  }
}
</style>
